<template>
  <div class="">
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-cellbox middle class="coach-manage">
        <e-cell-item>
          <e-heading grade='1'>招商计划</e-heading>
        </e-cell-item>
        <e-cell-item class="tr small weak" >
          <el-button size="small" type="primary" @click="handleAdd()">新增招商计划</el-button>
        </e-cell-item>
      </e-cellbox>
      <ul class="mod-steps">
        <li><p>1</p><span>创建招商计划</span></li>
        <li><p>2</p><span>通过平台审核</span></li>
        <li><p>3</p><span>平台招商</span></li>
        <li><p>4</p><span>签订协议</span></li>
        <li><p>5</p><span>招商成功</span></li>
      </ul>
      <div v-if="list.list && list.list.length>0">
        <template>
          <el-table
            v-bind="getTableProps()"
            :data="list.list"
            >
            <el-table-column
              prop="title"
              label="招商方案名称"
              width="250">
            </el-table-column>
            <el-table-column
              prop="merMoney"
              label="招商价值"
              width="150">
              <template slot-scope="scope">
                {{scope.row.merMoney | formatMoney}}
              </template>
            </el-table-column>
            <el-table-column
              label="招商状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.merStatus"
                  @change="handleChangeState(scope)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditStatus"
              label="审核状态">
              <template slot-scope="scope">
                {{scope.row.auditStatus | sponsorStatus}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="160">
              <template slot-scope="scope">
                <el-button
                  type="link"
                  @click="handleManage(scope.row.id)"
                  :disabled="scope.row.auditStatus != 3">管理</el-button>
                <el-button
                  type="link"
                  @click="handleEdit(scope.row.id)"
                  :disabled="scope.row.auditStatus == 1 || scope.row.auditStatus == 3">修改</el-button>
                <el-button
                  type="link"
                  @click="handleDel($event,scope.row.id,scope.row.status)"
                  :disabled="scope.row.auditStatus == 1 || scope.row.auditStatus == 3">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-bind="getPaginationProps(list)"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            >
          </el-pagination>
        </template>
      </div>
      <e-placeholder v-else-if="list.loaded" text="暂时没有招商计划哦" src="/static/images/sponsor/nodata_business.png">
      </e-placeholder>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from 'api/merchants'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      list: 'sponsor_merchants_list',
      form: 'merchants_form'
    })
  },
  data () {
    let isCertify
    return {
      isCertify,
      query: this.getQuery()
    }
  },
  methods: {
    fetch (query) { // 初始化获取数据， 分页，和搜索表单发生提交时被调用，如果想触发表单提交则调用this.submit()
      this.$store.dispatch('sponsor_merchants_list', query)
    },
    handleChangeState (item) { // 开关
      if (item.row.status === '1') {
        this.$confirm('确定要关闭招商计划吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('sponsor_merchants_changestate', item)
        }).catch(() => {
          this.$store.commit('SPONSOR_MERCHANTS_CHANGESTATE', {
            data: false,
            params: item
          })
        })
      } else {
        this.$store.dispatch('sponsor_merchants_changestate', item)
      }
    },
    handleAdd () { // 添加方法
      this.$store.commit('SPONSOR_MERCHANTS_SET_FORM') // 点添加的时候需要重置表单
      this.$router.push({path: '/sponsor/merchants/add'})
    },
    handleEdit (id) { // 编辑方法
      this.$router.push({path: '/sponsor/merchants/edit/' + id})
    },
    handleManage (id) {
      this.$router.push({path: '/sponsor/merchants/manage/' + id})
    },
    handleDel (event, id, status) { // 删除方法
      this.$confirm('数据删除后无法恢复，是否删除？', '提示', {
        type: 'warning'
      }).then(() => {
        // 执行删除接口
        api.merchants_del({
          id: id
        }, {context: event.target}).then(res => {
          this.fetch(this.query)
        }, () => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  
  .mod-steps{
    margin: 10px 0px 120px;
    &:before{
      content: "";
      display:inline-block;
      width:100%;
      height:1px;
      background:#e5e5e5;
      position:relative;
      top:15px;
      z-index: 1;
    }
    li{
      position:relative;
      z-index: 3;
      float: left;
      min-width:165px;
      text-align: center;
      p{
        width:22px;
        height:22px;
        border-radius:50%;
        text-align: center;
        margin:0 auto;
        line-height: 22px;
        border:1px #e5e5e5 solid;
        margin-bottom: 15px;
        background: white;
        color:#E5E5E5;
      }
      span{
      }
    }

  }
  .btn-style{
    margin:20px 0px;
  }
</style>
